Skip to content

feat:Implemented responsive navbar design with animated hamburger menu#35

Open
ananyaguptacodes wants to merge 7 commits intoVarshitha713:masterfrom
ananyaguptacodes:gssoc-animated-ui
Open

feat:Implemented responsive navbar design with animated hamburger menu#35
ananyaguptacodes wants to merge 7 commits intoVarshitha713:masterfrom
ananyaguptacodes:gssoc-animated-ui

Conversation

@ananyaguptacodes
Copy link

@ananyaguptacodes ananyaguptacodes commented Jul 31, 2025

🚀 [GSSoC'25] Responsive Navigation & Animations Overhaul

📌 Linked Issue

Closes #26 - "Make site responsive and add animations"

✨ Key Improvements

Feature Implementation Details
Responsive Navbar Fixed alignment issues, prevented wrapping, optimized for touch
Hamburger Menu Added smooth toggle animation (bars ↔ X) with proper ARIA labels
Mobile Layout Tested on 3 breakpoints (Desktop/Tablet/Mobile)
UI Animations Added entrance animations for projects and page elements

🧪 Testing Performed

  • Devices:
    • Desktop (≥1024px)
    • Tablet (768px)
    • Mobile (≤425px)
  • Browsers: Chrome

🛠 Technical Highlights

/* Added these key animations */
@keyframes slideIn {
  from { transform: translateX(-20px); opacity: 0 }
  to { transform: translateX(0); opacity: 1 }
}

/* Responsive hamburger solution */
@media (max-width: 768px) {
  .header-content {
    flex-wrap: nowrap; /* Prevents wrapping */
  }
}

 ### 📸 Visual Proof
Before:
<img width="847" height="795" alt="Screenshot 2025-07-31 165657" src="https://github.com/user-attachments/assets/6b36161d-7e9a-4c21-b660-8e91ff4ab7b3" />
After:
<img width="811" height="771" alt="Screenshot 2025-07-31 165717" src="https://github.com/user-attachments/assets/3d6cd381-a862-451d-a03e-7f03b74962d4" />
<img width="809" height="769" alt="Screenshot 2025-07-31 165750" src="https://github.com/user-attachments/assets/1fa1f974-58c8-4ec7-ab44-b7722fbf5e83" />

@netlify
Copy link

netlify bot commented Jul 31, 2025 •
edited
Loading

✅ Deploy Preview for code-canvas-dev ready!

Name Link
🔨 Latest commit 16f8143
🔍 Latest deploy log https://app.netlify.com/projects/code-canvas-dev/deploys/68b153bb63765500087028e6
😎 Deploy Preview https://deploy-preview-35--code-canvas-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Varshitha713
Varshitha713 reviewed Aug 1, 2025
View reviewed changes
Copy link
Owner

@Varshitha713 Varshitha713 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ananyaguptacodes resolve the merge conflicts!!

@Varshitha713 Varshitha713 added the merge-conflicts must be resolved to merge label Aug 1, 2025
@ananyaguptacodes
Copy link
Author

ananyaguptacodes commented Aug 3, 2025

Merge conflicts resolved! please let me know if you'd like me to handle any other GSSoC issues!

@ananyaguptacodes
Copy link
Author

ananyaguptacodes commented Aug 5, 2025

hey can u help me in this, its again and again having merge conflicts idk why

@Varshitha713
Copy link
Owner

Varshitha713 commented Aug 17, 2025

@ananyaguptacodes please DM me on discord or linkedin!!

@Varshitha713
Copy link
Owner

Varshitha713 commented Aug 24, 2025

@ananyaguptacodes please resolve merge conflicts by tomorrow if not i'll assign the issue to other contributors!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Varshitha713 Varshitha713 Varshitha713 left review comments

Assignees

No one assigned

Labels

merge-conflicts must be resolved to merge

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Make the website responsive and add basic animations

2 participants

@ananyaguptacodes @Varshitha713